import { Component } from 'solid-js'
import S from './Score.module.styl'
import { fixed } from './View'
import { useGame } from './game'

type Score = Component<{
  player: string
  score: number
}>

const Score: Score = prop =>
  <div class={S.score}>
    <div class={S.start}>{prop.player}有</div>
    <div class={S.value}>{prop.score}</div>
    <div class={S.end}>个集</div>
  </div>

const Display: Component = () => {
  const { store } = useGame()
  return <div class={`${fixed} ${S.view}`}>
    <Score player="我方" score={store.my}></Score>
    <Score player="对方" score={store.their}></Score>
  </div>
}

export default Display